<!--
 * @Author: your name
 * @Date: 2022-01-05 16:24:42
 * @LastEditTime: 2022-04-01 17:04:05
 * @LastEditors: 刘奇泽
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="app-container absolute top-0 left-0 right-0 bottom-0 select-none">
    <div class="main-container w-full h-full" v-if="isReady">
      <header class="header w-full flex justify-between">
        <div class="left-wrapper h-full">
          <img :src="logo" class="w-4/5 select-none" />
        </div>
        <div class="right-wrapper flex text-right h-full items-center justify-end">
          <span class="name">{{ currentItem?.deviceName }}</span>
          <span class="code self-end">{{ currentItem.deviceCode }}</span>
        </div>
      </header>
      <div class="main w-full">
        <div class="title-box-wrapper w-full flex text-center overflow-hidden">
          <div class="item flex justify-center flex-col items-center"><span class="text-black">问题</span><span class="text-black">Problem</span></div>
          <div class="item flex justify-center flex-col items-center"><span class="text-black">行动措施</span><span class="text-black">Action</span></div>
          <div class="item flex justify-center flex-col items-center"><span class="text-black">负责人</span><span class="text-black">Responsible</span></div>
          <div class="item flex justify-center flex-col items-center"><span class="text-black">日期</span><span class="text-black">Date</span></div>
          <div class="item flex justify-center items-center"><img src="./assets/4.png" alt="" /></div>
        </div>
        <div class="content overflow-hidden">
          <AScroll :len="list.length" :isStart="isScroll" v-if="list.length">
            <div class="item flex h-full items-center overflow-hidden" v-for="(item, index) in list" :key="index">
              <div class="bg-white h-full grid grid-rows-2 grid-cols-1 items-center">
                <div class="flex center-item items-center leading-snug flex-wrap">
                  <div class="w-full flex">
                    <div class="col-item inline-block w-3/12 leading-snug">
                      <span class="label text-black">班次:</span><span class="value text-black">{{ item.shift }}</span>
                    </div>
                    <div class="col-item inline-block w-5/12 leading-snug">
                      <span class="label text-black">触发时间:</span><span class="value text-black">{{ item.triggerTime }}</span>
                    </div>
                    <div class="col-item inline-block w-4/12 leading-snug">
                      <span class="label text-black">触发人:</span><span class="value text-black">{{ item.createBy }}</span>
                    </div>
                  </div>
                  <div class="w-full flex">
                    <div class="col-item inline-block w-2/3 leading-snug">
                      <span class="label text-black">物料号:</span><span class="value text-black">{{ item.productNo }}</span>
                    </div>
                    <div class="col-item inline-block w-1/3 leading-snug">
                      <span class="label text-black">订单号:</span><span class="value text-black">{{ item.orderNo }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex center-item items-center text_ddd2 leading-snug">
                  <span class="label text-black">问题描述:</span><span class="value text-black flex-1">{{ item.errorDescription }}</span>
                </div>
              </div>
              <div class="bg-white h-full grid grid-rows-2 grid-cols-1 items-center">
                <div class="flex center-item items-center text_ddd2 leading-snug">
                  <span class="label text-black">原因分析: </span><span class="value text-black">{{ item.analysis }}</span>
                </div>
                <div class="flex center-item items-center text_ddd2 leading-snug">
                  <span class="label text-black">改善措施: </span><span class="value text-black">{{ item.proposal }}</span>
                </div>
              </div>
              <div class="bg-white h-full flex justify-center items-center value">{{ item.head }}</div>
              <div class="bg-white h-full flex justify-center items-center text-center value">{{ item.dateOf }}</div>
              <div class="bg-white h-full flex justify-center items-center"><img :class="`status-${item.status}`" :src="statusOptions[item.status]" alt="" /></div>
            </div>
          </AScroll>
          <div v-else class="no-data justify-center h-full flex items-center">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="loading-container w-full h-full" v-else>
      <dv-loading></dv-loading>
    </div>
    <a-modal v-model:visible="isOpen" title="选择设备" width="1000px" class="model" :keyboard="false" :maskClosable="false" :closable="false" @ok="onHandleTypeOk">
      <div class="item" v-for="(item, index) in listTypeData" :key="item.workshopName">
        <h2>{{ item.workshopName }}</h2>
        <a-checkbox-group @change="onHandleChangeType" :disabled="hasDisabled[index]">
          <a-checkbox :value="t" v-for="t in item.childrenTDevice" :key="t.deviceId">{{ t.deviceName }}</a-checkbox>
        </a-checkbox-group>
      </div>
      <template #footer>
        <a-button key="submit" :disabled="!listType.length" type="primary" @click="onHandleTypeOk"> 确定 </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch, computed, onBeforeUnmount } from "vue";
import axios from "axios";
import Cookies from "js-cookie";
import { Local, formatDate } from "@/utils";
import AScroll from "@/components/scroll/index.vue";
import status1 from "@/assets/1.png";
import status2 from "@/assets/2.png";
import status3 from "@/assets/3.png";
import status4 from "@/assets/4.png";
import logo from "@/assets/logo.png";
const listType = ref(JSON.parse(Cookies.get("listType") || "[]"));
const statusOptions = {
  1: status1,
  2: status2,
  3: status3,
  4: status4,
} as any;
const listTypeData = ref<any>([]);
const isReady = ref(false);
const isOpen = ref(false);
const firstOpenTime = ref();
const listTypeIndex = ref(0);
const baseUrl = "http://192.168.66.111:8081";
const stepTime = 60 * 60 * 1000;
const isScroll = ref(false);
const currentItem = ref<any>();
const scrollItemHeight = ref(0);
const list = ref<any>([]);
const onHandleChangeType = (e: any) => {
  listType.value = e;
};
/** 选择类型方法 */
const onHandleTypeOk = () => {
  Cookies.set(
    "listType",
    JSON.stringify(
      listType.value.map((item: any) => {
        return { deviceId: item.deviceId, deviceName: item.deviceName, deviceCode: item.deviceCode };
      })
    )
  );
  isOpen.value = false;
  setTimeout(() => {
    isReady.value = true;
    isScroll.value = true;
  }, 500);
};

/** 检测是否有类型值 */
const hasType = () => {
  if (listType.value.length) {
    isReady.value = false;
    setTimeout(() => {
      isReady.value = true;
    }, 500);
  } else {
    isOpen.value = true;
    getDialogType();
  }
};
/** 获取请求 */
const getDialogType = async () => {
  const { data } = await axios.get(baseUrl + "/core/station/listUntitTo");
  listTypeData.value = data.rows;
};
/** 判断间距来循环 */
const getTime = () => {
  const now = +new Date();
  const time = now - firstOpenTime.value;
  if (time >= stepTime) {
    firstOpenTime.value = now;
    getIndex();
    getScrollList(listTypeIndex.value);
    isScroll.value = true;
  }
};
const getIndex = () => {
  listTypeIndex.value = listTypeIndex.value + 1;
  const i = listType.value.length;
  if (listTypeIndex.value >= i) {
    listTypeIndex.value = 0;
  }
};

/** 下面是每隔 5 秒 检测一下 是不是超过了一小时. */
let timer: any = null;
const interval = (func: any, wait = 5000) => {
  let interv = function () {
    func.call(null);
    timer = setTimeout(interv, wait);
  };
  timer = setTimeout(interv, wait);
};
/** 获取滚动数据 */
const getScrollList = async (index: number) => {
  currentItem.value = listType.value[index];
  const { deviceId } = currentItem.value;
  const { data } = await axios.get(baseUrl + "/core/largeScreen/LargeScreenAndonInfoResult", {
    params: {
      deviceId: deviceId,
      createTime: "2019-02-02 02:02:02",
      verifyTime: "2022-03-28 02:02:02",
    },
  });
  if (list.value.length) {
    list.value = [];
  }
  nextTick(() => {
    isScroll.value = true;
    list.value = data.data.largeScreenAndon;
  });
};
/** 开启监听 ArrowRight 按键 */
const onKeyDown = (e: any) => {
  if (e.keyCode === 39) {
    clearTimeout(timer);
    // isScroll.value = false;
    firstOpenTime.value = +new Date();
    getIndex();
    getScrollList(listTypeIndex.value);
    interval(getTime);
  }
};

/** 页面加载的时候, 判断一下 有没有记录 */
onMounted(() => {
  hasType();
  document.addEventListener("keyup", onKeyDown);
});
/** 页面关闭前 清除计时器 */
onBeforeUnmount(() => {
  clearTimeout(timer);
  document.removeEventListener("keyup", onKeyDown);
});
/** 只能选择其中一个车间 */
const hasDisabled = computed(() => {
  if (!listType.value.length) {
    return [false, false];
  } else {
    const firstItem = listType.value[0] as any;
    const { workshopId } = firstItem;
    const a = [false, false];
    for (let index = 0; index < listTypeData.value.length; index++) {
      if (listTypeData.value[index].workshopId === workshopId) {
        a[index] = false;
      } else {
        a[index] = true;
      }
    }

    return a;
  }
});
watch(isReady, (val: boolean) => {
  if (val) {
    firstOpenTime.value = +new Date();
    getScrollList(listTypeIndex.value);
    interval(getTime);
  } else {
    isScroll.value = false;
  }
});
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.app-container {
  padding: 8px;
  background: #e6e6e6;
  .main-container {
    .header {
      height: 100px;
      padding-right: 20px;
      .left-wrapper {
        width: 30%;
        img {
          height: 110px;
        }
      }
      .right-wrapper {
        padding: 20px 0;
        .code {
          font-size: 28px;
        }
        .name {
          font-size: 60px;
        }
      }
    }
    .main {
      height: calc(100% - 100px);
      padding: 20px;
      padding-top: 0%;
      .title-box-wrapper {
        height: 80px;
        .item {
          border: 2px solid #c9cacc;
          background: #c9cacc;
        }
        > div {
          margin-right: 10px;
          &:nth-child(1) {
            width: 30%;
          }
          &:nth-child(2) {
            width: 45%;
          }
          &:nth-child(3),
          &:nth-child(4) {
            width: 10%;
          }
          &:nth-child(5) {
            width: 5%;
            margin-right: 0px;
            img {
              width: 50px;
              height: 50px;
            }
          }
          span:first-child {
            font-size: 30px;
            letter-spacing: 10px;
          }
          span:last-child {
            display: inline-block;
            font-size: 26px;
          }
        }
      }
      .content {
        margin-top: 20px;
        height: calc(100% - 80px);
        overflow: hidden;
        .item {
          height: 200px;
          background: #e6e6e6;
          margin-bottom: 20px;
          .label {
            font-size: 22px;
            flex-basis: max-content;
          }
          .value {
            padding-left: 10px;
            font-size: 20px;
          }
          > div {
            margin-right: 10px;
            &:nth-child(1) {
              width: 30%;
              padding-left: 20px !important;
            }
            &:nth-child(2) {
              width: 45%;
              padding-left: 20px !important;
              .center-item {
                overflow: hidden;
                .value {
                  flex: 1;
                }
              }
            }
            &:nth-child(3),
            &:nth-child(4) {
              width: 10%;
            }
            &:nth-child(5) {
              width: 5%;
              margin-right: 0px;
              img {
                width: 50px;
                height: 50px;
                &.status-2 {
                  width: 25px;
                  height: 50px;
                }
                &.status-1 {
                  width: 25px;
                  height: 25px;
                }
              }
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5) {
              padding: 10px;
            }
          }
        }
        .no-data {
          font-size: 46px;
        }
      }
    }
  }
}
.model {
  .item {
    &:first-child h2 {
      padding-top: 0;
    }
    h2 {
      padding: 20px 0;
      font-size: 18px;
    }
    .ant-checkbox-group {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      align-items: center;
      justify-content: center;
      .ant-checkbox-wrapper {
        margin: 0px;
        font-size: 16px;
      }
    }
  }
  .ant-modal-footer {
    display: none;
  }
}
</style>
